<template>
<div id="newsDetail">
  <el-row style="margin-top:20px;position:relative;" >
    <el-col :span="4">
      <div class="grid-content bg-purple"></div>
    </el-col>
    <el-col :span="16" >
      <el-row style="margin-top:10px">
        <el-col :span="17" style="background-color:white">
          <div style="padding:0 20px;min-height:440px">
            <h1 style="font-weight: 400;">{{news.newsTitle}}</h1>
            <div style="text-align: right;color:#999;">{{ news.adminName }}<span>·</span>{{ news.createTime }}</div>
            <p style="font-size:16px;font-weight: 400;color:#111;letter-spacing: .5px;line-height: 30px; white-space: pre-line">
             {{news.newsContent}}
            </p>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="hot_article">
            <div class="choice">
              <span style="font-size:18px;color: #606266;">文章热榜</span>
              <el-divider direction="horizontal"></el-divider>
              <div class="choice_title"><span class="choice_index" style="color:#d9000c;">1</span>
                <span>2023届前端暑期实习求职总结</span></div>
              <div class="choice_title"><span class="choice_index" style="color:#f55e3d;">2</span>
                <span>2023届前端暑期总结</span></div>
              <div class="choice_title"><span class="choice_index" style="color:#ff9821;">3</span>
                <span>2023届总结</span></div>
              <div class="choice_title"><span class="choice_index">7</span>
                <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
              <div class="choice_title"><span class="choice_index">5</span>
                <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
              <div class="choice_title"><span class="choice_index">6</span>
                <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
              <div class="choice_title"><span class="choice_index">7</span>
                <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
              <div class="choice_title"><span class="choice_index">8</span>
                <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
              <div class="choice_title"><span class="choice_index">9</span>
                <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
              <div class="choice_title"><span class="choice_index">10</span>
                <span>2023届前端暑期实习求职总结2023届前端暑期实习求职总结</span></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="4">
      <div class="grid-content bg-purple">
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
import {getNews} from "@/network/recruit";

export default {
  name: "NewsDetail",
  data(){
    return{
    newsId:'',
      news:{},
    }
  },
  mounted() {
    if(this.$route.params.newsId!=undefined) {
      sessionStorage.setItem("newsId", this.$route.params.newsId);
    }
    this.newsId= sessionStorage.getItem("newsId");
    this.showNews();
  },
  methods:{
    showNews(){
      getNews(this.newsId).then(res=>{
        this.news= res.data.data;
      })
    },
  }
}
</script>

<style scoped>


.grid-content {
  min-height: 50px;
  color: white;
  font-size: 14px;
}

.hot_article {
  width: 97.5%;
  height: 460px;
  background-color: white;
  margin-left: 10px;
}

.choice {
  padding: 10px 20px 0 20px;
}

.article_item .el-divider--horizontal {
  height: 0.5px;
  margin: 20px 0 5px 0;
}

.choice_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  color: #414a60;
  margin:15px 0;
}

.choice_index {
  display: inline-block;
  width:20px;
  font-family: kanzhun-Regular, kanzhun;
  margin-right: 5px;
  color:#8b8e99;
}
</style>